<template>
	<view class="header-box">
		<navbar-module :title="$t('discover.information')"
			@showBubbleBox="showBubbleBox" :type="1"  v-if="!navShow"
			@handleSearch="navShow = !navShow" @back="leftClick(urlIndex)" />
		<view class="search-line" v-else>
		<view class="u-nav-slot" @click="handleShowSidebar">
			<view class="iconfont icon-31liebiao icon-color"></view>
		</view>
			<view class="search-block">
				<view class="iconfont icon-sousuo search-icon"></view>
				<input v-model="searchForm.title" :placeholder="$t('index.search')" placeholder-style="color: #878787;"
					class="search-input" @confirm="getMainList" />
			</view>
			<view class="iconfont icon-bianji icon-color icon-margin"
				@click.stop="showBubbleBox"></view>
		</view>
		
	<!-- tab栏 -->
		<TopPopup labelName="labelName" :show.sync="tagsShow" :labelList="tagList" @change="changeTag"></TopPopup>
		
		<u-tabs :current="currentIndex" :list="tagList" keyName="labelName" lineWidth="0" @change="changeTag" :inactiveStyle="{
        background: '#FFFFFF',
        'border-radius': '10rpx',
        padding: '12rpx 20rpx',
        'font-size': '28rpx',
      }" :activeStyle="{
        background: '#61BDB2',
        'border-radius': '10rpx',
        color: '#FFFFFF',
        padding: '12rpx 20rpx',
        'font-size': '28rpx',
      }" :itemStyle="{
        padding: 0,
        'margin-right': '20rpx',
      }">
			<view slot="right" style="padding-left: 10rpx" @tap="onMoreTag">
				<view class="iconfont icon-31liebiao biao"></view>
			</view>
		</u-tabs>
		<view class="main-box">
			<view class="search-box">
				<view class="three-box">
					<view class="select-box" style="padding-right: 20upx;" @click="countryShow = true">
						<view>
							{{ searchForm.countryIosCode == 'RU' ? $t('tarding.Russia') : searchForm.countryIosCode == 'CN' ? $t('tarding.China') : $t('dating.Country') }}
						</view>
						<view class="select-icon"></view>
					</view>
					<view class="select-box" style="flex: 1; justify-content: center; padding-right: 20upx; overflow: hidden;">
						<regionSelect :cityValue.sync="location" :emptyText="$t('dating.City')"
							:flex="location && location.length > 0 ? '1' : 'unset'" :countryIosCode="searchForm.countryIosCode"
							ref="regionSelectCascader" @totalValue="getTotalValue"></regionSelect>
						<view class="select-icon" @click="$refs.regionSelectCascader.show = true"></view>
					</view>
					<view class="select-box" @click="priceShow = true">
						<view>{{ $t('information.PriceRange') }}</view>
						<view class="select-icon"></view>
					</view>
				</view>
				<view class="select-line"></view>
				<view class="select-box" @click="changeDirection()">
					{{ $t('information.Price') }}
					<image src="~@/static/image/feeServices/up.png" alt="" v-if="searchForm.isAsc === 'asc'"
						class="select-direction" mode="heightFix"></image>
					<image src="~@/static/image/feeServices/down.png" alt="" v-else-if="searchForm.isAsc === 'desc'"
						class="select-direction" mode="heightFix"></image>
					<image src="~@/static/image/feeServices/default.png" alt="" v-else class="select-direction" mode="heightFix">
					</image>
				</view>
			</view>
			<view class="list-box" v-if="dataList && dataList.length > 0">
				<view class="list-item" v-for="item in dataList" :key="item.id"
					@click="gotoPage(`/pagesDiscover/information/InfoDetail?id=${item.id}`)">
					<view class="img-box">
						<image :src="item.image" class="img" mode="aspectFill"></image>
					</view>
					<view class="middle-box">
						<view class="price">{{ getCoinName(item.currencyId) }}{{ item.price }}</view>
						<view class="place omit">{{ item.place }}</view>
					</view>
					<view class="title omit">{{ item.title }}</view>
				</view>
			</view>
			<u-empty v-else :text="$t('information.EmptyDataList')" textColor="#878787" textSize="14" width="104" height="100"
				marginTop="80" icon="/static/image/bourse/none_order.png"></u-empty>
		</view>
		<!-- 选择国家 -->
		<u-picker :closeOnClickOverlay="true" @close="countryShow = false" :show="countryShow" ref="uPickerCountry" :columns="[countryColumns]" @confirm="confirmCountry"
			keyName="label" @cancel="countryShow = false" :cancelText="$t('cancel')" :confirmText="$t('confirm')"></u-picker>
		<u-popup :show="priceShow" mode="bottom" round="50upx" @close="priceShow = false">
			<view class="price-box">
				<view class="close" @click="close()"></view>
				<view class="box-title">{{ $t('information.PriceRange') }}</view>
				<view class="price-select">
					<view class="select-box">
						<input :placeholder="$t('information.MinimumPrice')" placeholder-class="placeholder" class="input-box"
							v-model="searchForm.startPrice" type="number"
							@blur="searchForm.startPrice = numberChange(numInput($event.detail.value, 2), 0, 1000000)" />
					</view>
					<view class="select-line"></view>
					<view class="select-box">
						<input :placeholder="$t('information.HighestPrice')" placeholder-class="placeholder" class="input-box"
							v-model="searchForm.endPrice" type="number"
							@blur="searchForm.endPrice = numberChange(numInput($event.detail.value, 2), 0, 1000000)" />
					</view>
				</view>
				<view class="btn-box">
					<view class="btn btn-left" @click="resetPrice()">{{ $t('dating.reset') }}</view>
					<view class="btn btn-right" @click="confirmPrice()">{{ $t('confirm') }}</view>
				</view>
			</view>
		</u-popup>
		<SidebarModule :show="showSidebar" @closeSidebar="handleCloseSidebar" />
	</view>
</template>

<script>
	import SidebarModule from '../../components/SidebarModule.vue';
	import NavbarModule from "@/components/NavbarModule.vue";
	import regionSelect from "@/pages/makefriends/components/regionSelect.vue";
	import {
		queryLabelList,
		queryInfoList
	} from "@/services/information.js"
	import {
		getCurrencyList
	} from "@/services/bourse.js";
	import {
		mapActions,
		mapState
	} from "vuex";
	import TopPopup from "@/components/TopPopup.vue";
	export default {
		components: {
			NavbarModule,
			regionSelect,
			TopPopup,
			SidebarModule
		},
		data() {
			return {
				urlIndex: 'Information',
				language: '',
				navShow: false,
				dataList: [],
				total: 0,
				searchForm: {
					pageSize: 20,
					pageNum: 1,
					status: 1,
					categoryId: null,
					startPrice: null,
					endPrice: null,
					title: null,
					orderByColumn: null,
					isAsc: null,
					place: null,
					country: null,
					countryIosCode: null
				},
				tagList: [],
				tagIndex: 0,
				currencyList: [],
				countryShow: false,
				countryColumns: [{
						label: this.$t('feeServices.allTag'),
						value: null,
					},
					{
						label: this.$t('tarding.Russia'),
						value: 'RU',
					},
					{
						label: this.$t('tarding.China'),
						value: 'CN',
					},
				],
				location: [],
				priceShow: false,
				tagsShow: false,
				currentIndex: 0,
				showSidebar: false
			};
		},
		computed: {
			...mapState(["userInfo", "token"]),
		},
		methods: {
			//编辑页
			showBubbleBox() {
				if (this.token) {
					uni.navigateTo({
						url: "/pagesDiscover/information/InfoRelease",
					});
				} else {
					uni.navigateTo({
						url: "/pages/login/Login",
					});
				}
				
			},
			// 侧边栏
			handleShowSidebar() {
				this.showSidebar = true;
			},
			handleCloseSidebar() {
				this.showSidebar = false;
			},
			onMoreTag() {
				this.tagsShow = true
				console.log('点击表情',this.tagList);
			},
			close() {
				this.priceShow = false
				this.$nextTick(() => {
					this.resetPrice()
				})
			},
			confirmPrice() {
				this.getMainList()
				this.priceShow = false
			},
			resetPrice() {
				this.searchForm.startPrice = null
				this.searchForm.endPrice = null
			},
			numberChange(e, min, max) {
				const Min = Number(min || 0)
				const Max = Number(max || 0)
				const E = Number(e || 0)
				if (E < Min) {
					return Min
				}
				if (E > Max && Max > 0) {
					return Max
				}
				return e
			},
			numInput(num, precision) {
				if (precision === 0) {
					// 输入纯数字
					num = num.replace(/[^\d]/g, '')
					if (String(num)[1] === '0') {
						num = Number(num)
					}
					return num
				} else {
					num = num.replace(/[^\d.]/g, '')
					if (String(num)[0] === '0' && String(num)[1] !== '.') {
						num = Number(num)
					} else if (String(num)[0] === '.') {
						num = null
					} else {
						if (num.indexOf('.') != num.lastIndexOf('.')) {
							num = String(num).substring(0, num.lastIndexOf('.'))
						}
					}
					if (String(num).indexOf('.') !== -1) {
						num = String(num).substring(0, num.indexOf('.') + precision + 1)
					}
					return num
				}
			},
			getTotalValue(value) {
				if (value) {
					this.searchForm.place = JSON.stringify(value)
				} else {
					this.searchForm.place = null
				}
				this.getMainList()
			},
			confirmCountry(e) {
				this.searchForm.countryIosCode = e.value[0].value
				this.location = []
				this.searchForm.place = null
				this.countryShow = false;
				this.getMainList()
			},
			changeDirection() {
				if (!this.searchForm.isAsc) {
					this.searchForm.isAsc = 'asc'
					this.searchForm.orderByColumn = 'price'
				} else if (this.searchForm.isAsc === 'asc') {
					this.searchForm.isAsc = 'desc'
					this.searchForm.orderByColumn = 'price'
				} else if (this.searchForm.isAsc === 'desc') {
					this.searchForm.isAsc = null
					this.searchForm.orderByColumn = null
				}
				this.getMainList()
			},
			async getCurrency() {
				const resp = await getCurrencyList();
				if (resp.result.code == 200) {
					this.currencyList = resp.result.data;
				}
			},
			getCoinName(currencyId) {
				const coinIndex = this.currencyList.findIndex(value => String(value.id) === String(currencyId))
				return coinIndex !== -1 ? this.currencyList[coinIndex].symbol : ''
			},
			changeTag(e) {
				this.currentIndex = e.index
				let index = e.index
				if (this.tagIndex === index) {
					return;
				}
				this.tagIndex = index;
				this.searchForm.categoryId = (index === -1 ? null : this.tagList[index].id)
				this.getMainList();
			},
			gotoPage(url, type) {
				if (type == 1) {
					uni.switchTab({
						url,
					});
					return;
				}
				uni.navigateTo({
					url,
				});
			},
			async getMainList() {
				if (Number(this.searchForm.startPrice) > Number(this.searchForm.endPrice)) {
					const age = this.searchForm.endPrice
					this.searchForm.endPrice = this.searchForm.startPrice
					this.searchForm.startPrice = age
				}
				let option = {
					...this.searchForm
				}
				for (let key in option) {
					if (!option[key] && String(option[key]) !== '0') {
						delete option[key]
					}
				}
				uni.showLoading()
				const resp = await queryInfoList(option);
				uni.stopPullDownRefresh();
				uni.hideLoading()
				if (resp.result.code === 200) {
					this.total = resp.result.total;
					let list = resp.result.rows.map(item => {
						let place = item.place
						try {
							item.place = place ? this.getRegionNameList(JSON.parse(place)).join(',') : ''
						} catch {
							item.place = place
						}
						return {
							...item
						}
					});
					if (this.searchForm.pageNum == 1) {
						this.dataList = list ? list : [];
					} else {
						this.dataList = [...this.dataList, ...list];
					}
				}
			},
			async getLabelList() {
				const resp = await queryLabelList({
					language: 'zh-Hans'
				})
				if (resp.result.code === 200) {
					this.tagList = resp.result.rows.map(item => {
						item.label = JSON.parse(item.category);
						item.labelName = this.getLabelLangType(item);
						return {
							...item
						};
					})
					this.tagList = [{
							id: null,
							labelName: this.$t("feeServices.allTag")
						},
						...this.tagList
					]
				}
			},
			getLabelLangType(obj) {
				if (this.language === "zh-Hans") {
					return obj.label.cn;
				} else if (this.language === "en") {
					return obj.label.en;
				} else if (this.language === "ru") {
					return obj.label.ru;
				}
			},
		},
		onLoad() {
			this.language = uni.getLocale();
			this.getPrePages(this.urlIndex) // 获取上一个页面的路径已经参数
		},
		async onShow() {
			this.getLabelList()
			await this.getCurrency()
			this.dataList = []
			this.total = 0
			this.searchForm.pageNum = 1
			this.getMainList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.dataList = []
			this.total = 0
			this.searchForm.pageNum = 1
			this.getMainList()
		},
		onReachBottom() {
			if (this.total > this.searchForm.pageNum * this.searchForm.pageSize) {
				this.searchForm.pageNum++;
				this.getMainList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .cascader {
		font-size: 28upx;
		font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
		font-weight: 400;
		white-space: nowrap;
		color: #000000;
	}

	.omit {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		white-space: pre-wrap;
		word-break: break-all;
	}

	.price-box {
		width: 100%;
		padding: 30upx 30upx 0upx;
		box-sizing: border-box;
		position: relative;

		.close {
			width: 48upx;
			height: 48upx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url('@/static/image/close.png');
			position: absolute;
			top: 30upx;
			right: 30upx;
			z-index: 2;
		}

		.box-title {
			width: 100%;
			text-align: center;
			font-size: 36upx;
			font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
			font-weight: 500;
			color: #000000;
			line-height: 52upx;
		}

		.price-select {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30upx;

			.select-box {
				flex: 1;
				height: 88upx;
				background: rgba(144, 146, 153, 0.1);
				border-radius: 88upx;
				padding: 0upx 20upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.placeholder {
					color: #909299;
				}

				.input-box {
					font-size: 24upx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #000000;
					text-align: center;
				}
			}

			.select-line {
				width: 48upx;
				height: 48upx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-image: url('@/static/image/line.png');
				margin: auto 10upx;
			}
		}

		.btn-box {
			width: 100%;
			height: 100upx;
			margin-top: 50upx;
			display: flex;
			align-items: center;

			.btn {
				flex: 1;
				height: 80upx;
				border-radius: 80upx;
				line-height: 80upx;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
			}

			.btn-left {
				background: #82D8CD;
				margin-right: 30upx;
			}

			.btn-right {
				background: #61BDB2;
			}
		}
	}

	.header-box {
		box-sizing: border-box;
		padding: 30upx;

		.icon-color {
			color: #61BDB2;
			font-size: 40upx;
		}

		.search-line {
			display: flex;
			align-items: center;
			margin-bottom: 38rpx;

			.back-icon {
				width: 19upx;
				height: 19upx;
				border-bottom: 2upx solid #202020;
				border-left: 2upx solid #202020;
				transform-origin: center center;
				transform: rotate(45deg);
				margin-left: 16upx;
			}

			.search-block {
				margin-left: 26rpx;
				width: 100%;
				height: 76upx;
				background: #ffffff;
				border-radius: 38upx;
				box-sizing: border-box;
				padding: 30upx;
				display: flex;
				align-items: center;
				margin-right: 50upx;

				.search-icon {
					color: #878787;
					font-size: 30upx;
				}

				.search-input {
					flex: 1;
					margin-left: 30upx;
					font-size: 26upx;
					font-weight: 400;
					color: #212121;
					line-height: 1em;
				}
			}

			.zuo {
				color: #000000;
				font-size: 40upx;
				margin-right: 15upx;
			}
		}

		.main-box {
			width: 100%;

			.search-box {
				width: 100%;
				height: 80upx;
				font-size: 28upx;
				font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
				font-weight: 400;
				color: #000000;
				white-space: nowrap;
				display: flex;
				align-items: center;
				margin-top: 30upx;

				.three-box {
					flex: 1;
					display: flex;
					align-items: center;
				}

				.select-line {
					width: 2upx;
					height: 20upx;
					background: rgba(0, 0, 0, 0.05);
					margin: auto 30upx;
				}

				.select-box {
					width: fit-content;
					display: flex;
					align-items: center;
					box-sizing: border-box;

					.select-icon {
						width: 24upx;
						height: 16upx;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						background-image: url('@/static/image/down.png');
						margin-left: 10upx;
					}

					.select-direction {
						height: 24rpx;
						margin-left: 10upx;
					}
				}
			}

			.list-box {
				width: 100%;
				height: fit-content;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.list-item {
					width: calc((100% - 30upx) / 2);
					background: #FFFFFF;
					border-radius: 20upx;
					padding: 20upx;
					box-sizing: border-box;
					margin-top: 30upx;

					&:nth-child(1) {
						margin-top: 0;
					}

					&:nth-child(2) {
						margin-top: 0;
					}

					.img-box {
						width: 100%;
						padding-bottom: 100%;
						border-radius: 20upx;
						overflow: hidden;
						position: relative;

						.img {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
						}
					}

					.middle-box {
						width: 100%;
						padding-top: 40upx;
						display: flex;
						align-items: center;

						.price {
							height: 48upx;
							font-size: 32upx;
							font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
							font-weight: 500;
							color: #FE6600;
							line-height: 48upx;
							margin-right: 20upx;
						}

						.place {
							flex: 1;
							height: 36upx;
							font-size: 24upx;
							font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
							font-weight: 400;
							color: #878787;
							line-height: 36upx;
						}
					}

					.title {
						font-size: 28upx;
						font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
						font-weight: 400;
						color: #878787;
						line-height: 40upx;
						margin-top: 10upx;
						-webkit-line-clamp: 2 !important;
						line-clamp: 2 !important;
					}
				}
			}
		}
	}
</style>